<template>
	<view class="feedback-container">
		<view class="record" @click="goFeedbackRecord">反馈记录</view>
		<view class="name">
			<text class="info">记录编号:</text>
			<input type="number" v-model="params.code" placeholder="请输入记录编号">
		</view>
		<view class="name">
			<text class="info">联系方式:</text>
			<input type="number" v-model="params.mobile" value="18825651425" placeholder="请输入联系方式">
		</view>
		<view class="name">
			<text class="category">反馈类型:</text>
			<view class="content" @click="useOutClickSide">
				<easy-select size="medium" :options="options" ref="easySelect" :value="selecValue" @selectOne="selectOne"></easy-select>
			</view>
		</view>
		<textarea v-if="isFocus" :focus="isFocus" @blur="hideTextArea" ref="textarea" class="text" value="" maxlength="200"
		 v-model="params.content" />
		<view @click="showTextArea" v-else class="text">{{content}}</view>
		<!-- 上传图片 -->
		<view class="up_img">
			<view class="add" v-if="chooseImgs.length !== 3" @click="UpImg">
				<image src="../../static/icon/8.png" mode=""></image>
			</view>
			<view class="add_img" v-for="(item,index) in chooseImgs" :key='index'>
				<image :src="item" mode="" @click="previewImg(index)"></image>
				<view class="clear" @click="removeImg(index)">x</view>
				<!-- <icon class="clear" type="clear" @click="removeImg(index)" size="23" color='red' /> -->
			</view>
			<!-- 图片数量 -->
			<view></view>
		</view>
		<!-- 提交按钮 -->
		<button class="btn" @click="feedBack">提交</button>
		<!-- 遮罩层 -->
		<view class="dialog" v-show="visible"></view>
		<view class="toast" v-show="visible">
			<view class="icon">
				<image src="../../static/icon/success.png"></image>
			</view>
			<view class="success">反馈成功</view>
		</view>
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	import easySelect from '@/components/easy-select/easy-select.vue'
	export default {
		data() {
			return {
				tempPath: '',
				selecValue: null,
				options: [{
					value: 1,
					label: '积分未更新'
				}, {
					value: 2,
					label: '垃圾乱扔'
				},{
					value: 3,
					label: '其他'
				}],
				chooseImgs: [],
				params: {
					projId: null,
					residentId: null,
					code: null,
					content: null,
					mobile: null,
					sgType: null,
					pic1: null,
					pic2: null,
					pic3: null,
					residentName: null
				},
				file: {
					fileName: null,
					fileData: null
				},
				baseArr: [],
				visible: false,
				isFocus: false,
				code: '',
				content: '请添加文字描述（200字以内）...'
			}
		},
		onLoad(options) {
			this.params.code = options.code
			this.code = options.code
		},
		computed: {
			...mapState(['userInfo'])
		},
		methods: {
			previewImg(index) {
				uni.previewImage({
				  urls: this.chooseImgs,
				  current: index,
				  longPressActions: {
				    itemList: ["发送给朋友", "保存图片", "收藏"],
				    success: function (data) {
				      console.log(
				        "选中了第" +
				          (data.tapIndex + 1) +
				          "个按钮,第" +
				          (data.index + 1) +
				          "张图片"
				      )
				    },
				    fail: function (err) {
				      console.log(err.errMsg);
				    }
				  }
				})
			},
			goFeedbackRecord() {
				uni.navigateTo({
					url: '../feedbackRecord/feedbackRecord'
				})
			},
			selectOne(options) {
				this.selecValue = options.label
				this.params.sgType = options.value
			},
			useOutClickSide() {
				this.$refs.easySelect.hideOptions && this.$refs.easySelect.hideOptions()
			},
			UpImg() {
				uni.chooseImage({
					count: 3 - this.chooseImgs.length, //默认9
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: (res) => {
						console.log(JSON.stringify(res.tempFilePaths));
						this.chooseImgs = this.chooseImgs.concat(res.tempFilePaths)
					}
				});
			},
		 urlTobase64(url) {
			uni.getFileSystemManager().readFile({
					filePath: url, //选择图片返回的相对路径
					encoding: 'base64', //编码格式
					success: res => { //成功的回调
						let base64 = 'data:image/jpeg;base64,' + res.data //不加上这串字符，在页面无法显示的哦
						// this.dataList.picList.push(base64);
						console.log(base64)
						this.file.fileData = base64
						//this.baseArr.push(base64)
						this.file.fileName = url
						this.uploadFile()
						
					}
				})
				// this.uploadFile()
			},
			// 删除图片
			removeImg(index) {
				this.chooseImgs.splice(index,1)
			},
			// 提交反馈
		 feedBack() {
				if(this.params.code == null){
					uni.showToast({
						title: '请填写记录编号',
						icon: 'none'
					})
					return false
				} else if(this.params.mobile == null){
					uni.showToast({
						title: '请填写联系方式',
						icon: 'none'
					})
				} else if(this.selecValue == null){
					uni.showToast({
						title: '请选择反馈类型',
						icon: 'none'
					})
					return false
				} else if(this.params.content == null){
					uni.showToast({
						title: '请填写反馈描述',
						icon: 'none'
					})
				} else {
					if(this.chooseImgs.length !== 0) {
						this.chooseImgs.forEach(item =>{
						 	// this.urlTobase64(item)
							this.compress(item)
						})
					}else {
						this.submitFeedBack()
					}	
				}
			},
			// 压缩图片
			compress(url) {
				uni.compressImage({
					src: url,
					quality: 10,
					success: res => {
						this.urlTobase64(res.tempFilePath)
					}
				})
			},
			// 上传文件
			uploadFile() {
				this.$http.post('common/file/upload',this.file).then(res => {
					if(res.code === 10000){
						this.baseArr.push(res.data.id)
						this.params.pic1 = this.baseArr[0]
						this.params.pic2 = this.baseArr[1]
						this.params.pic3 = this.baseArr[2]
						uni.showLoading({
							 title: "正在上传中",
							 mask: true
						})
						if(this.baseArr.length === this.chooseImgs.length){
							uni.hideLoading()
							this.submitFeedBack()
						}
					}
				})
			},
			// 提交反馈
			submitFeedBack() {
				this.params.projId = this.userInfo.projId
				this.params.residentId = this.userInfo.id
				this.params.residentName = this.userInfo.name
				this.$http.post('garbage/suggestion/create',this.params).then(res => {
					console.log(res)
					if(res.code === 10000){
						this.visible = true
						this.initParams()
						setTimeout(() => {
							this.visible = false
							uni.switchTab({
								url: '../index/index'
							})
						},2000)
					}
				})
			},
			showTextArea() {
				this.isFocus = true
			},
			hideTextArea() {
				this.isFocus = false
				if(this.params.content != null){
					this.content = this.params.content
				}
			},
			initParams() {
				this.params = {
					projId: null,
					residentId: null,
					code: this.code,
					content: null,
					mobile: null,
					sgType: null,
					pic1: null,
					pic2: null,
					pic3: null,
					residentName: null
				}
				this.baseArr = []
				this.content = '请添加文字描述（200字以内）...'
				this.chooseImgs = []
				this.selecValue = null
			}
		},
		components:{
			'easy-select': easySelect
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F5F5F5;
	}
	.feedback-container {
		height: 808rpx;
		background-color: #fff;
		.record {
			margin: 0 18rpx 14rpx 620rpx;
			width: 112rpx;
			height: 27rpx;
			font-size: 28rpx;
			font-family: Noto Sans S Chinese;
			font-weight: 400;
			color: rgba(51, 51, 51, 1);
		}
		.name {
			display: flex;
			// margin: 0 20rpx;
			padding-left: 20rpx;
			width: 750rpx;
			height: 76rpx;
			align-items: center;
			box-shadow: 0px 1px 0px 0px rgba(237, 237, 237, 1);
			text {
				margin-right: 79rpx;
				color: #333333;
				font-size: 28rpx;
			}
			input {
				color: #333333;
				font-size: 28rpx;
			}
			.info {
				margin-right: 33rpx;
			}
			.category {
				margin-right: 18rpx;
			}
		}
		.text {
			width: 750rpx;
			height: 280rpx;
			font-size: 28rpx;
			color: #333;
			padding-top: 29rpx;
			padding-left: 20rpx;
			line-height: 40rpx;
			overflow-wrap: break-word;
		}
		.up_img {
				width: 750rpx;
				height: 268rpx;
				margin-left: 20rpx;
				display: flex;
				.add {
					width: 230rpx;
					height: 230rpx;
					margin-right: 10rpx;
					image {
						width: 100%;
						height: 100%;
					}
				}
				.add_img {
					width: 230rpx;
					height: 230rpx;
					margin-right: 10rpx;
					position: relative;
					image {
						width: 100%;
						height: 100%;
					}
					.clear {
						width: 40rpx;
						height: 40rpx;
						background-color: #000;
						opacity: 0.5;
						color: #BFBFBF;
						position: absolute;
						top: 0;
						right: 0;
						font-size: 32rpx;
						text-align: center;
						line-height: 40rpx;
					}
				}
			}
			.btn {
				width: 536rpx;
				height: 72rpx;
				background: rgba(66, 173, 255, 1);
				border-radius: 36px;
				color: #fff;
				line-height: 72rpx;
				margin-top: 50rpx;
			}
			.dialog {
				width: 100%;
				height: 100%;
				background-color: #000;
				opacity: 0.39;
				position: absolute;
				left: 0;
				top: 0;
			}
			.toast {
				width: 476rpx;
				height: 310rpx;
				border-radius: 20rpx;
				position: absolute;
				left: 130rpx;
				top: 425rpx;
				color: #333;
				background-color: #fff;
				.icon {
					width: 82rpx;
					height: 82rpx;
					position: absolute;
					left: 197rpx;
					top: 61rpx;
					image {
						width: 100%;
						height: 100%;
					}
				}
				.success {
					font-size: 30rpx;
					position: absolute;
					left: 180rpx;
					top: 170rpx;
				}
			}
		}
</style>
